<template>
  <div class="m-life">
    <el-row>
      <ul class="nav">
        <li v-for="(item, index) in navs" :key="index">
          <router-link :to="item.toUrl" :class="item.class">{{
            item.title
          }}</router-link>
        </li>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="14">
        <slider />
      </el-col>
      <el-col :span="4">
        <router-link :to="{ name: 'goods', params: { name: '生活' } }">
          <div class="m-life-pic"></div>
        </router-link>
      </el-col>
      <el-col :span="6">
        <div class="m-life-login">
          <h4>
            <img :src="headPhoto" alt />
          </h4>
          <template v-if="!$store.state.userName">
            <p>
              <router-link :to="{ name: 'register' }">
                <el-button round>注册</el-button>
              </router-link>
            </p>
            <p>
              <router-link :to="{ name: 'login' }">
                <el-button round>立即登陆</el-button>
              </router-link>
            </p>
          </template>
          <template v-else>
            <p>
              {{ $store.state.userName }}
            </p>
            <p style="height:50px"></p>
            <el-button round @click="exit">退出登录</el-button>
          </template>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7">
        <div class="m-life-hotel"></div>
      </el-col>
      <el-col :span="7">
        <div class="m-life-music"></div>
      </el-col>
      <el-col :span="4">
        <div class="m-life-coop"></div>
      </el-col>
      <el-col :span="6">
        <div class="m-life-downapp">
          <img
            src="http://s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png"
            alt="下载APP"
          />
          <p>美团APP手机版</p>
          <p class="last-p">
            <span class="red"> 1元起 </span>
            吃喝玩乐
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Slider from "./slider.vue";
import cookie from '@/plugins/cookie.js';
export default {
  data() {
    return {
      navs: [
        {
          toUrl: "/",
          class: "takeout",
          title: "美团外卖",
        },
        {
          toUrl: "/",
          class: "",
          title: "猫眼电影",
        },
        {
          toUrl: "/",
          class: "",
          title: "美团酒店",
        },
        {
          toUrl: "/",
          class: "apartment",
          title: "民宿/公寓",
        },
        {
          toUrl: "/",
          class: "business",
          title: "商家入驻",
        },
        {
          toUrl: "/",
          class: "",
          title: "美团公益",
        },
      ],
      headPhoto:
        this.$store.state.userPhoto ||
        "//s0.meituan.net/bs/fe-web-meituan/2d05c2b/img/avatar.jpg",
    };
  },
  components: {
    Slider,
  },
  methods:{
    exit(){
      cookie.removeCookie('userName');
      confirm("确定退出登录吗？")?this.$router.go(0):'';
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/css/index/life.scss";
</style>

